<template>
  <view class="container">
    <!-- 顶部标题区域 -->
    <view class="header">
      <text class="h1">雪落剧场</text>
	  <br/>
      <text class="date">2022-12-08 10:56:56</text>
    </view>
    
    <!-- 作品信息区域 -->
    <view class="content">
      <text class="work-name h3">作品名称：情场</text>
	  <br/>
      <text class="creators h3">联合创作者：刘正军、南墨、薛丁粒、x8口印，Reiner Gorgin、Olafur Arnalds</text>
	  <br/>
      <text class="work-type h3">作品类型：版画插画</text>
	  <br/>
      <text class="work-size h3">作品尺寸：尺寸可变</text>
	  <br/>
      <text class="work-year h3">创作年代：2023</text>
      
      <!-- 作品介绍文本 -->
      <view class="description">
        <progress>   本作品特指运动国家大剧院委托创作（插图是艺术家费杂与心理学家刘正军合作的系列艺术实验项目之一，或的学科项目研究以艺术与科技融合的方式介入心理疗法。本次国家大剧院要并分创作的(插图)转回剧，还邀请了高、管、曲、器、灯用红海、Flainr Gansur、Olafur Arnalds等乐等作为联合创作者。
		
		</progress>
		<progress>
			
			作品画工人工作及绘1计技术，恰开展呈现观众的触电，还会针对每一位观众进行的审美进入人的。西高利疗性的自图到地体验，为体验者形成从理解的认知、转化到具体的心理效应。
			</progress>
       
		<progress>
			
			据了解，本届画展是一个多月的展览，共有86个舞剧作品、260多名的学报参演，经过专家的会评审后，最后选出7件专业作品和专业88个舞剧作品进入决赛。本届活动激发了学界热爱舞剧艺术的A面，丰富了校园生活，增加了学校爱校氛围、热爱生活的美好情绪，对提高全校学生德智的审美能力以及陶冶学生的陶冶作用，有很强的学院作用。
			</progress>
      </view>
    </view>
    
    <!-- 相关推荐区域 -->
    <view class="recommend">
          <h3>相关推荐</h3>
          <view class="recommend-list">
           <view class="recommend-item" v-for="(item, index) in 6" :key="index">
              <img src="https://via.placeholder.com/100" alt="推荐图片">
              <view class="info">
                <p class="title">百部UD设计大在学制作办</p>
                <p class="date">课时:19:30</p>
              </view>
            </view>
          </view>
        </view>
    
    <!-- 最新评论区域 -->
    <view class="comments">
      <view class="title-row">
        <text>最新评论</text>
        <text>380</text>
      </view>
      
      <view class="comment-list">
        <view class="comment-item">
          <image src="https://via.placeholder.com/40" alt="头像" class="avatar">
          <view class="comment-content">
            <view class="header">
              <text class="nickname">用户昵称</text>
              <text class="like">5</text>
            </view>
            <text class="content">全面评论 家具发版设计刊准备工作，西这一过定下定的重改览</text>
          </view>
        </view>
        
        <view class="comment-item">
          <image src="https://via.placeholder.com/40" alt="头像" class="avatar">
          <view class="comment-content">
            <view class="header">
              <text class="nickname">用户昵称</text>
              <text class="like">5</text>
            </view>
            <text class="content">全面评论 家具发版设计刊准备工作，西这一过定下定的重改览</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>

	export default{
		name:"detail",
		components:{
	
		},
		data(){
			return{
				
			}
		},
		methods:{
			
		},
		onLoad() {
			
		}
	}
</script>
<style >
/* 基础容器设置 */
.container {
  padding: 15px;
  background-color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #333;
  max-width: 500px;
  margin: 0 auto;
}

.h1{
	font-size: 30px;
	font-weight: 700;
}

.h3{
	font-size: 20px;
	font-weight: 600;
}

/* 头部样式 */
.header {
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
  margin-bottom: 15px;
}

.header text {
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 8px 0;
}

.date {
  font-size: 12px;
  color: #999;
  margin: 0;
}

/* 作品信息样式 */
.content {
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
}

.work-name,
.creators,
.work-type,
.work-size,
.work-year {
  font-size: 14px;
  margin: 0 0 8px 0;
  line-height: 1.4;
}

.creators {
  color: #666;
}

.description text {
  font-size: 14px;
  line-height: 1.6;
  text-align: justify;
  margin: 10px 0;
}
/* 推荐区域 */
.recommend {
  margin-bottom: 20px;
}

.recommend h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 15px 0;
}

.recommend-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
}

.recommend-item {
	  width: calc(50% - 6px);
	  background: #f8f8f8;
	  border-radius: 8px;
	  overflow: hidden;
	}
	
	.recommend-item image {
	  width: 100%;
	  height: 120px;
	  display: block;
	  object-fit: cover;
	}
	
	.info {
	  padding: 8px 10px;
	}
	
	.info .title {
	  font-size: 14px;
	  margin: 0;
	  line-height: 1.3;
	  display: -webkit-box;
	  -webkit-box-orient: vertical;
	  -webkit-line-clamp: 2;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  height: 36px;
	}
	
	.info .date {
	  font-size: 12px;
	  color: #666;
	  margin: 5px 0 0 0;
	}
	

/* 评论区域样式 */
.comments .title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}

.comments text {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

.title-row text {
  font-size: 14px;
  color: #666;
}

.comment-item {
  display: flex;
  padding: 15px 0;
  border-bottom: 1px solid #eee;
}

.comment-item:last-child {
  border-bottom: none;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 12px;
  flex-shrink: 0;
}

.comment-content {
  flex: 1;
}

.comment-content .header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.nickname {
  font-size: 15px;
  font-weight: 500;
}

.like {
  font-size: 13px;
  color: #999;
}

.content {
  font-size: 14px;
  color: #333;
  line-height: 1.4;
  margin: 0;
}
</style>